{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <title>分页</title>
</head>

<br>
<div class="text-center">
    {% for book in books %}
        <span>书名： {{ book }} <br/></span>
    {% endfor %}
</div>

{# 实现分页标签的代码 #}
{# 这里使用 bootstrap 渲染页面 #}
<div id="pages" class="text-center">
    <nav>
        <ul class="pagination">
            <li class="step-links">
                {% if books.has_previous %}
                    <a class='active' href="?page={{ books.previous_page_number }}">上一页</a>
                {% endif %}

                <span class="current">
                    Page {{ books.number }} of {{ books.paginator.num_pages }}</span>

                {% if books.has_next %}
                    <a class='active' href="?page={{ books.next_page_number }}">下一页</a>
                {% endif %}
            </li>
        </ul>
    </nav>
</div>
</body>
</html>